import {
  DataTableColumns,
  NButton,
  NCard,
  NDataTable,
  NDivider,
  NIcon,
  NDropdown,
  NSwitch,
} from "naive-ui";
import EditUser from "./EditUser";
import { userEditor } from "@/hooks/useGlobal";
import { PersonEdit20Filled } from "@vicons/fluent";
import { Ref } from "vue";
import PageScroll from "@/components/pageScroll";
export default defineComponent({
  name: "Account",
  setup() {
    type Song = {
      no: number;
      userName: string;
      date: string;
      state: boolean;
      auth: string;
    };
    let isSwitchLoading: Ref<{ [key: string]: boolean }> = ref({});
    const createColumns = ({
      del,
      edit,
      editAuth,
      switchState,
    }: {
      del: (row: Song) => void;
      edit: (row: Song) => void;
      editAuth: (e: MouseEvent, row: Song) => void;
      switchState: (row: Song) => void;
    }): DataTableColumns<Song> => {
      return [
        {
          title: "账号",
          key: "userName",
          minWidth: 160,
        },
        {
          title: "注册时间",
          key: "date",
          width: 220,
        },
        {
          title: "角色",
          key: "auto",
          minWidth: 160,
          render(row) {
            return [
              h(
                NButton,
                {
                  size: "small",
                  text: true,
                  color: ropdownOption.colors[row.auth],
                  style: {
                    cursor: "default",
                  },
                },
                {
                  default: () => row.auth,
                }
              ),
              h(
                NButton,
                {
                  size: "small",
                  text: true,
                  onClick: (e) => editAuth(e, row),
                  type: "info",
                  color: ropdownOption.colors[row.auth],
                  disabled: !row.state,
                  style: {
                    transform: "translate(3px, 3px)",
                  },
                },
                {
                  icon: () => {
                    return h(NIcon, null, {
                      default: () => h(PersonEdit20Filled),
                    });
                  },
                }
              ),
            ];
          },
        },
        {
          title: "账号状态",
          key: "state",
          minWidth: 160,
          render(row) {
            return [
              h(
                NSwitch,
                {
                  rubberBand: false,
                  value: row.state,
                  loading: !!isSwitchLoading.value[row.no],
                  round: false,
                  onUpdateValue: () => switchState(row),
                },
                {
                  checked: () => {
                    return h(
                      "span",
                      {
                        style: {
                          fontSize: "12px",
                        },
                      },
                      {
                        default: () => "已激活",
                      }
                    );
                  },
                  unchecked: () => {
                    return h(
                      "span",
                      {
                        style: {
                          fontSize: "12px",
                        },
                      },
                      {
                        default: () => "已关闭",
                      }
                    );
                  },
                }
              ),
            ];
          },
        },
        {
          title: "操作",
          key: "actions",
          minWidth: 160,
          render(row) {
            return [
              h(
                NButton,
                {
                  size: "small",
                  type: "primary",
                  tertiary: true,
                  style: {
                    marginRight: "10px",
                  },
                  onClick: () => edit(row),
                },
                { default: () => "编辑" }
              ),
              h(
                NButton,
                {
                  size: "small",
                  type: "warning",

                  onClick: () => del(row),
                },
                { default: () => "删除" }
              ),
            ];
          },
        },
      ];
    };
    const data: Song[] = reactive([]);
    for (let i = 0; i < 19; i++) {
      data.push({
        no: i + 1,
        userName: "Wonderwall",
        date: "2022-12-21 09:30:12",
        state: i % 3 == 0 ? true : false,
        auth: "管理员",
      });
    }
    const columns = createColumns({
      del(row: Song) {
        window.$dialog.warning({
          title: "警告",
          content: "此操作无法恢复，确定删除吗？",
          positiveText: "确定",
          negativeText: "不确定",
          onPositiveClick: () => {
            window.$message.success("确定");
          },
          onNegativeClick: () => {
            window.$message.error("不确定");
          },
        });
      },
      edit(row: Song) {
        userEditor.toggleEditUserShow();
        userEditor.isEditUser.value = true;
      },
      editAuth(e: MouseEvent, row: Song) {
        activeRow = row;
        ropdownOption.isShowOpdown = false;
        nextTick().then(() => {
          ropdownOption.isShowOpdown = true;
          ropdownOption.x = e.clientX;
          ropdownOption.y = e.clientY;
        });
      },
      switchState(row: Song) {
        isSwitchLoading.value[row.no] = true;
        setTimeout(() => {
          row.state = !row.state;
          isSwitchLoading.value[row.no] = false;
        }, 500);
      },
    });
    const ropdownOption: { [key: string]: any } = reactive({
      isShowOpdown: false,
      x: 0,
      y: 0,
      options: [
        {
          label: "管理员",
          key: "管理员",
        },
        {
          label: "普通管理员",
          key: "普通管理员",
        },
        {
          label: "客服",
          key: "客服",
        },
        {
          label: "调度",
          key: "调度",
        },
      ],
      colors: {
        管理员: "#18A058",
        普通管理员: "#ff69b4",
        客服: "#4395FF",
        调度: "#F0A020",
      },
    });
    let activeRow: any = {};
    const handleAuth = (val: string) => {
      activeRow.auth = val;
      ropdownOption.isShowOpdown = false;
    };
    return () => (
      <div class="flex margin-t-10 flex-auto overflow-hidden">
        <PageScroll>
          <div class="sticky top-0 z-10 pl-3 pr-3">
            <NCard
              bordered={false}
              contentStyle={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px 0",
                alignItems: "center",
              }}
            >
              <span class=" text-xs opacity-90">{data.length}个账号</span>
              <NButton
                type="primary"
                size="small"
                onClick={() => {
                  userEditor.toggleEditUserShow();
                }}
              >
                新增账号
              </NButton>
            </NCard>
            <NDivider style="margin:0;" />
          </div>
          <div class="p-3">
            <NDataTable
              columns={columns}
              data={data}
              pagination={false}
            ></NDataTable>
          </div>
        </PageScroll>
        <EditUser />
        <NDropdown
          placement="right-start"
          trigger="manual"
          x={ropdownOption.x}
          y={ropdownOption.y}
          onClickoutside={() => {
            ropdownOption.isShowOpdown = false;
          }}
          onSelect={handleAuth}
          options={ropdownOption.options}
          show={ropdownOption.isShowOpdown}
        />
      </div>
    );
  },
});
